<!-- 通话弹窗 -->
<template>
  <div class="popCall-warp" v-if="showTelCall">
    <div class="pop-inner">
      <div class="pop-head">
        <div class="tit">&nbsp;</div>
        <div class="close" @click="closePop">×</div>
      </div>
      <div class="pop-body">
        <div class="popCall-img"></div>
        <div class="popCall-name">{{ popData.captain }}</div>
        <div class="popCall-class"></div>
        <div class="popCall-state">正在呼叫</div>
        <div class="popCall-num">{{ popData.telephone }}</div>
        <div class="popCall-close" @click="closePop"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
import YjwzfbStore from "@/store/wsyj/YjdwfbModule/YjdwfbStore";
import {messsageBus} from '../../../util/message';

@Component({
  name: "PopBhDetail",
  components: {}
})
export default class PopBhDetail extends Vue {
    private created() {
    (messsageBus as any).$on("callPhone", (event: any) => {
      this.callPhone();
    });
  }
  private callPhone() {
      console.log(111111111111)
    //   打电话，暂无接口
  }
  get showTelCall() {
    return YjwzfbStore.state.showTelCall;
  }
  private closePop() {
    YjwzfbStore.state.showTelCall = false;
  }
  get popData() {
    return YjwzfbStore.state.popData;
  }
}
</script>
<style lang="less" scoped>
.popCall-warp {
  position: absolute;
  width: 414px;
  height: 500px;
  top: 0;
  left: 500px;
  text-align: center;
  background: url("../../../assets/img/panel/gisUI/pop-call_bg.png") no-repeat 0
    0;
  .pop-inner {
    .pop-head {
      padding: 17px 15px;
    }
    .pop-body {
      padding: 10px 15px 15px;
      height: calc(100% - 54px);
      div {
        color: #fff;
        line-height: 1.5;
      }
      .popCall-img {
        margin: auto;
        width: 174px;
        height: 174px;
        background: url("../../../assets/img/panel/gisUI/person.png") no-repeat
          center;
      }
      .popCall-name {
        font-size: 22px;
        font-weight: bold;
      }
      .popCall-class {
        color: #c9d6d6;
      }
      .popCall-state {
        color: #c9d6d6;
      }
      .popCall-num {
        font-size: 24px;
        color: #00deff;
      }
      .popCall-close {
        margin: auto;
        width: 80px;
        height: 80px;
        background: url("../../../assets/img/panel/gisUI/call-off.png")
          no-repeat 0 0;
        cursor: pointer;
        box-shadow: 0 0 10px 2px #ea9494 inset;
        border-radius: 100%;
      }
    }
  }
}
</style>
